<template>
  <el-upload v-model:file-list="fileList" class="upload-demo" action="#" limit="4" :on-preview="handlePreview"
    :on-remove="handleRemove" list-type="picture" accept="image/jpg,image/jpeg,image/png" :on-change="uploadFile">
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
const formData = ref(null);
const imageUrl = ref('');
const uploadFile = (item) => {
  formData.value = item.raw; // 图片文件
  imageUrl.value = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
  console.log(imageUrl.value, 'imageUrl');
  console.log(formData.value, 'formData');
};

const fileList = ref<UploadUserFile[]>([
  {
    name: 'identify1.png',
    url: 'src/assets/uploadimage/identify1.png',
  },
  {
    name: 'fidentify2.jpg',
    url: 'src/assets/uploadimage/identify2.jpg',
  },
  {
    name: 'driving1.jpg',
    url: 'src/assets/uploadimage/driving1.jpg',
  },
  {
    name: 'driving2.png',
    url: 'src/assets/uploadimage/driving2.png',
  },
])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}


</script>
